{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-form-dropzone",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/form/file-upload/chat-form.tsx",
      "content": "'use client';\r\n\r\nimport {\r\n  FileUploader,\r\n  FileInput,\r\n  FileUploaderContent,\r\n  FileUploaderItem,\r\n} from '@/components/ui/file-upload';\r\nimport { Paperclip, Upload } from 'lucide-react';\r\nimport Image from 'next/image';\r\nimport { useState } from 'react';\r\nimport { DropzoneOptions } from 'react-dropzone';\r\n\r\nconst FileUploadDropzone = () => {\r\n  const [files, setFiles] = useState<File[] | null>([]);\r\n  const [message, setMessage] = useState('');\r\n\r\n  const dropzone = {\r\n    accept: {\r\n      'image/*': ['.jpg', '.jpeg', '.png'],\r\n    },\r\n    multiple: true,\r\n    maxFiles: 4,\r\n    maxSize: 1 * 1024 * 1024,\r\n  } satisfies DropzoneOptions;\r\n\r\n  return (\r\n    <div className='py-16'>\r\n      <div\r\n        className={`${\r\n          files?.length == 0 && 'flex gap-0'\r\n        } relative border dark:bg-neutral-950 bg-neutral-50 rounded-md p-2 w-96 mx-auto`}\r\n      >\r\n        <FileUploader\r\n          value={files}\r\n          orientation='vertical'\r\n          onValueChange={setFiles}\r\n          className='w-fit pr-3'\r\n          dropzoneOptions={dropzone}\r\n        >\r\n          {files?.length === 0 ? (\r\n            // Layout when no files are present\r\n            <div className='flex items-center gap-2'>\r\n              <FileInput\r\n                className='bg-primary  text-background rounded-md w-fit'\r\n                parentclass='w-fit'\r\n              >\r\n                <Paperclip className='size-8 p-1.5' />\r\n                <span className='sr-only'>Select your files</span>\r\n              </FileInput>\r\n            </div>\r\n          ) : (\r\n            // Layout when files are present\r\n            <div className='flex flex-col gap-2 mb-2'>\r\n              <div className='flex items-center gap-2 '>\r\n                <FileInput\r\n                  className='bg-primary-foreground border-primary/20 border   text-primary rounded-md w-fit'\r\n                  parentclass='w-fit'\r\n                >\r\n                  <Paperclip className='size-12 p-3' />\r\n                  <span className='sr-only'>Select your files</span>\r\n                </FileInput>\r\n                <FileUploaderContent className='flex items-start flex-row gap-1'>\r\n                  {files?.map((file, i) => (\r\n                    <FileUploaderItem\r\n                      key={i}\r\n                      index={i}\r\n                      className='size-12 w-fit p-0 rounded-md overflow-hidden border'\r\n                      aria-roledescription={`file ${i + 1} containing ${\r\n                        file.name\r\n                      }`}\r\n                    >\r\n                      <Image\r\n                        src={URL.createObjectURL(file)}\r\n                        alt={file.name}\r\n                        height={80}\r\n                        width={80}\r\n                        className='size-12 rounded-md object-cover bg-primary'\r\n                      />\r\n                    </FileUploaderItem>\r\n                  ))}\r\n                </FileUploaderContent>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </FileUploader>\r\n        <input\r\n          type='text'\r\n          className='outline-hidden dark:bg-neutral-800 bg-neutral-50 w-full'\r\n          placeholder='Your message here...'\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default FileUploadDropzone;\r\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/file-upload.tsx",
      "content": "'use client';\r\n\r\nimport { cn } from '@/lib/utils';\r\nimport {\r\n  Dispatch,\r\n  SetStateAction,\r\n  createContext,\r\n  forwardRef,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport {\r\n  useDropzone,\r\n  DropzoneState,\r\n  FileRejection,\r\n  DropzoneOptions,\r\n} from 'react-dropzone';\r\nimport { toast } from 'sonner';\r\nimport { Trash2 as RemoveIcon } from 'lucide-react';\r\n\r\ntype DirectionOptions = 'rtl' | 'ltr' | undefined;\r\n\r\ntype FileUploaderContextType = {\r\n  dropzoneState: DropzoneState;\r\n  isLOF: boolean;\r\n  isFileTooBig: boolean;\r\n  removeFileFromSet: (index: number) => void;\r\n  activeIndex: number;\r\n  setActiveIndex: Dispatch<SetStateAction<number>>;\r\n  orientation: 'horizontal' | 'vertical';\r\n  direction: DirectionOptions;\r\n};\r\n\r\nconst FileUploaderContext = createContext<FileUploaderContextType | null>(null);\r\n\r\nexport const useFileUpload = () => {\r\n  const context = useContext(FileUploaderContext);\r\n  if (!context) {\r\n    throw new Error('useFileUpload must be used within a FileUploaderProvider');\r\n  }\r\n  return context;\r\n};\r\n\r\ntype FileUploaderProps = {\r\n  value: File[] | null;\r\n  reSelect?: boolean;\r\n  onValueChange: (value: File[] | null) => void;\r\n  dropzoneOptions: DropzoneOptions;\r\n  orientation?: 'horizontal' | 'vertical';\r\n};\r\n\r\n/**\r\n * File upload Docs: {@link: https://localhost:3000/docs/file-upload}\r\n */\r\n\r\nexport const FileUploader = forwardRef<\r\n  HTMLDivElement,\r\n  FileUploaderProps & React.HTMLAttributes<HTMLDivElement>\r\n>(\r\n  (\r\n    {\r\n      className,\r\n      dropzoneOptions,\r\n      value,\r\n      onValueChange,\r\n      reSelect,\r\n      orientation = 'vertical',\r\n      children,\r\n      dir,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const [isFileTooBig, setIsFileTooBig] = useState(false);\r\n    const [isLOF, setIsLOF] = useState(false);\r\n    const [activeIndex, setActiveIndex] = useState(-1);\r\n    const {\r\n      accept = {\r\n        'image/*': ['.jpg', '.jpeg', '.png', '.gif'],\r\n        'video/*': ['.mp4', '.MOV', '.AVI'],\r\n      },\r\n      maxFiles = 1,\r\n      maxSize = 4 * 1024 * 1024,\r\n      multiple = true,\r\n    } = dropzoneOptions;\r\n\r\n    const reSelectAll = maxFiles === 1 ? true : reSelect;\r\n    const direction: DirectionOptions = dir === 'rtl' ? 'rtl' : 'ltr';\r\n\r\n    const removeFileFromSet = useCallback(\r\n      (i: number) => {\r\n        if (!value) return;\r\n        const newFiles = value.filter((_, index) => index !== i);\r\n        onValueChange(newFiles);\r\n      },\r\n      [value, onValueChange]\r\n    );\r\n\r\n    const handleKeyDown = useCallback(\r\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n\r\n        if (!value) return;\r\n\r\n        const moveNext = () => {\r\n          const nextIndex = activeIndex + 1;\r\n          setActiveIndex(nextIndex > value.length - 1 ? 0 : nextIndex);\r\n        };\r\n\r\n        const movePrev = () => {\r\n          const nextIndex = activeIndex - 1;\r\n          setActiveIndex(nextIndex < 0 ? value.length - 1 : nextIndex);\r\n        };\r\n\r\n        const prevKey =\r\n          orientation === 'horizontal'\r\n            ? direction === 'ltr'\r\n              ? 'ArrowLeft'\r\n              : 'ArrowRight'\r\n            : 'ArrowUp';\r\n\r\n        const nextKey =\r\n          orientation === 'horizontal'\r\n            ? direction === 'ltr'\r\n              ? 'ArrowRight'\r\n              : 'ArrowLeft'\r\n            : 'ArrowDown';\r\n\r\n        if (e.key === nextKey) {\r\n          moveNext();\r\n        } else if (e.key === prevKey) {\r\n          movePrev();\r\n        } else if (e.key === 'Enter' || e.key === 'Space') {\r\n          if (activeIndex === -1) {\r\n            dropzoneState.inputRef.current?.click();\r\n          }\r\n        } else if (e.key === 'Delete' || e.key === 'Backspace') {\r\n          if (activeIndex !== -1) {\r\n            removeFileFromSet(activeIndex);\r\n            if (value.length - 1 === 0) {\r\n              setActiveIndex(-1);\r\n              return;\r\n            }\r\n            movePrev();\r\n          }\r\n        } else if (e.key === 'Escape') {\r\n          setActiveIndex(-1);\r\n        }\r\n      },\r\n      // eslint-disable-next-line react-hooks/exhaustive-deps\r\n      [value, activeIndex, removeFileFromSet]\r\n    );\r\n\r\n    const onDrop = useCallback(\r\n      (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\r\n        const files = acceptedFiles;\r\n\r\n        if (!files) {\r\n          toast.error('file error , probably too big');\r\n          return;\r\n        }\r\n\r\n        const newValues: File[] = value ? [...value] : [];\r\n\r\n        if (reSelectAll) {\r\n          newValues.splice(0, newValues.length);\r\n        }\r\n\r\n        files.forEach((file) => {\r\n          if (newValues.length < maxFiles) {\r\n            newValues.push(file);\r\n          }\r\n        });\r\n\r\n        onValueChange(newValues);\r\n\r\n        if (rejectedFiles.length > 0) {\r\n          for (let i = 0; i < rejectedFiles.length; i++) {\r\n            if (rejectedFiles[i].errors[0]?.code === 'file-too-large') {\r\n              toast.error(\r\n                `File is too large. Max size is ${maxSize / 1024 / 1024}MB`\r\n              );\r\n              break;\r\n            }\r\n            if (rejectedFiles[i].errors[0]?.message) {\r\n              toast.error(rejectedFiles[i].errors[0].message);\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      },\r\n      // eslint-disable-next-line react-hooks/exhaustive-deps\r\n      [reSelectAll, value]\r\n    );\r\n\r\n    useEffect(() => {\r\n      if (!value) return;\r\n      if (value.length === maxFiles) {\r\n        setIsLOF(true);\r\n        return;\r\n      }\r\n      setIsLOF(false);\r\n    }, [value, maxFiles]);\r\n\r\n    const opts = dropzoneOptions\r\n      ? dropzoneOptions\r\n      : { accept, maxFiles, maxSize, multiple };\r\n\r\n    const dropzoneState = useDropzone({\r\n      ...opts,\r\n      onDrop,\r\n      onDropRejected: () => setIsFileTooBig(true),\r\n      onDropAccepted: () => setIsFileTooBig(false),\r\n    });\r\n\r\n    return (\r\n      <FileUploaderContext.Provider\r\n        value={{\r\n          dropzoneState,\r\n          isLOF,\r\n          isFileTooBig,\r\n          removeFileFromSet,\r\n          activeIndex,\r\n          setActiveIndex,\r\n          orientation,\r\n          direction,\r\n        }}\r\n      >\r\n        <div\r\n          ref={ref}\r\n          tabIndex={0}\r\n          onKeyDownCapture={handleKeyDown}\r\n          className={cn(\r\n            'grid w-full focus:outline-hidden overflow-hidden ',\r\n            className,\r\n            {\r\n              'gap-2': value && value.length > 0,\r\n            }\r\n          )}\r\n          dir={dir}\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      </FileUploaderContext.Provider>\r\n    );\r\n  }\r\n);\r\n\r\nFileUploader.displayName = 'FileUploader';\r\n\r\nexport const FileUploaderContent = forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ children, className, ...props }, ref) => {\r\n  const { orientation } = useFileUpload();\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  return (\r\n    <div\r\n      className={cn('w-full px-1')}\r\n      ref={containerRef}\r\n      aria-description='content file holder'\r\n    >\r\n      <div\r\n        {...props}\r\n        ref={ref}\r\n        className={cn(\r\n          ' rounded-xl gap-1',\r\n          orientation === 'horizontal' ? 'grid grid-cols-2' : 'flex flex-col',\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\nFileUploaderContent.displayName = 'FileUploaderContent';\r\n\r\nexport const FileUploaderItem = forwardRef<\r\n  HTMLDivElement,\r\n  { index: number } & React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, index, children, ...props }, ref) => {\r\n  const { removeFileFromSet, activeIndex, direction } = useFileUpload();\r\n  const isSelected = index === activeIndex;\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      className={cn(\r\n        'h-7 p-1 border rounded-md justify-between overflow-hidden  w-full cursor-pointer relative hover:bg-primary-foreground',\r\n        className,\r\n        isSelected ? 'bg-muted' : ''\r\n      )}\r\n      {...props}\r\n    >\r\n      <div className='font-medium   leading-none tracking-tight flex items-center gap-1.5 h-full w-full'>\r\n        {children}\r\n      </div>\r\n      <button\r\n        type='button'\r\n        className={cn(\r\n          'absolute bg-primary rounded-sm text-background p-1',\r\n          direction === 'rtl' ? 'top-1 left-1' : 'top-[0.145em] right-1'\r\n        )}\r\n        onClick={() => removeFileFromSet(index)}\r\n      >\r\n        <span className='sr-only'>remove item {index}</span>\r\n        <RemoveIcon className='w-3 h-3 hover:stroke-destructive  duration-200 ease-in-out' />\r\n      </button>\r\n    </div>\r\n  );\r\n});\r\n\r\nFileUploaderItem.displayName = 'FileUploaderItem';\r\n\r\ninterface FileInputProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  parentclass?: string;\r\n  dropmsg?: string;\r\n}\r\nexport const FileInput = forwardRef<HTMLDivElement, FileInputProps>(\r\n  ({ className, parentclass, dropmsg, children, ...props }, ref) => {\r\n    const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();\r\n    const rootProps = isLOF ? {} : dropzoneState.getRootProps();\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        {...props}\r\n        className={cn(\r\n          'relative w-full',\r\n          parentclass,\r\n          isLOF ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'\r\n        )}\r\n      >\r\n        <div\r\n          className={cn(\r\n            'w-full rounded-lg transition-colors duration-300 ease-in-out',\r\n            dropzoneState.isDragAccept && 'border-green-500 bg-green-50',\r\n            dropzoneState.isDragReject && 'border-red-500 bg-red-50',\r\n            isFileTooBig && 'border-red-500 bg-red-200',\r\n            !dropzoneState.isDragActive &&\r\n              'border-gray-300 hover:border-gray-400',\r\n            className\r\n          )}\r\n          {...rootProps}\r\n        >\r\n          {children}\r\n          {dropzoneState.isDragActive && (\r\n            <div className='absolute inset-0 flex items-center justify-center bg-primary-foreground/60 backdrop-blur-xs rounded-lg'>\r\n              <p className='text-primary font-medium'>Drop an image here.</p>\r\n            </div>\r\n          )}\r\n        </div>\r\n        <input\r\n          ref={dropzoneState.inputRef}\r\n          disabled={isLOF}\r\n          {...dropzoneState.getInputProps()}\r\n          className={cn(isLOF && 'cursor-not-allowed')}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n);\r\n",
      "type": "registry:component"
    }
  ]
}